<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字竖排显示</title>
  <style>
    p, div, span {
      margin: 0;
      padding: 0;
    }
    /* text: 文字竖向展示Test ABC设定体处理后系统 */
    @font-face {
      font-family: "SYSTBD";
      src: url("SYSTBD.ttf/font.eot?base64=1&font=SYSTBD&text=%E6%96%87%E5%AD%97%E7%AB%96%E5%90%91%E5%B1%95%E7%A4%BATest%20ABC%E8%AE%BE%E5%AE%9A%E4%BD%93%E5%A4%84%E7%90%86%E5%90%8E%E7%B3%BB%E7%BB%9F"); /* IE9 */
      src: local('☺'),
        url(data:font/woff;charset=utf-8;base64,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AGUAJwAuAFMAbwB1AHIAYwBlACAASABhAG4AIABTAGUAcgBpAGYAIABDAE4AQgBvAGwAZABTAG8AdQByAGMAZQAgAEgAYQBuACAAUwBlAHIAaQBmACAAQwBOACAAQgBvAGwAZAA6AFYAZQByAHMAaQBvAG4AIAAxAC4AMAAwAFMAbwB1AHIAYwBlACAASABhAG4AIABTAGUAcgBpAGYAIABDAE4AIABCAG8AbABkAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAwACAAQQBwAHIAaQBsACAANwAsACAAMgAwADEANwAsACAAaQBuAGkAdABpAGEAbAAgAHIAZQBsAGUAYQBzAGUAUwBvAHUAcgBjAGUASABhAG4AUwBlAHIAaQBmAEMATgAtAEIAbwBsAGQAUwBvAHUAcgBjAGUAIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIABvAGYAIABBAGQAbwBiAGUAIABTAHkAcwB0AGUAbQBzACAASQBuAGMAbwByAHAAbwByAGEAdABlAGQAIABpAG4AIAB0AGgAZQAgAFUAbgBpAHQAZQBkACAAUwB0AGEAdABlAHMAIABhAG4AZAAvAG8AcgAgAG8AdABoAGUAcgAgAGMAbwB1AG4AdAByAGkAZQBzAC4AQQBkAG8AYgBlACAAUwB5AHMAdABlAG0AcwAgAEkAbgBjAG8AcgBwAG8AcgBhAHQAZQBkAFIAeQBvAGsAbwAgAE4ASQBTAEgASQBaAFUASwBBACCJf1habbxbUAAgACgAawBhAG4AYQAgACYAIABpAGQAZQBvAGcAcgBhAHAAaABzACkAOwAgAEYAcgBhAG4AawAgAEcAcgBpAGUA3wBoAGEAbQBtAGUAcgAgACgATABhAHQAaQBuACwAIABHAHIAZQBlAGsAIAAmACAAQwB5AHIAaQBsAGwAaQBjACkAOwAgAFcAZQBuAGwAbwBuAGcAIABaAEgAQQBOAEcAIF8gZYefmQAgACgAYgBvAHAAbwBtAG8AZgBvACkAOwAgAFMAYQBuAGQAbwBsAGwAIABDAG8AbQBtAHUAbgBpAGMAYQB0AGkAbwBuAHMAIMCws8zO5LukssjPAMd0wVgALAAgAFMAbwBvAGgAeQB1AG4AIABQAEEAUgBLACC8FcIY1gQALAAgAFkAZQBqAGkAbgAgAFcARQAgxwTGCMnEACAAJgAgAEQAbwBuAGcAaABvAG8AbgAgAEgAQQBOACDVXLPZ1sgAIAAoAGgAYQBuAGcAdQBsACAAZQBsAGUAbQBlAG4AdABzACwAIABsAGUAdAB0AGUAcgBzACAAJgAgAHMAeQBsAGwAYQBiAGwAZQBzACkARAByAC4AIABLAGUAbgAgAEwAdQBuAGQAZQAgACgAcAByAG8AagBlAGMAdAAgAGEAcgBjAGgAaQB0AGUAYwB0ACwAIABnAGwAeQBwAGgAIABzAGUAdAAgAGQAZQBmAGkAbgBpAHQAaQBvAG4AIAAmACAAbwB2AGUAcgBhAGwAbAAgAHAAcgBvAGQAdQBjAHQAaQBvAG4AKQA7ACAATQBhAHMAYQB0AGEAawBhACAASABBAFQAVABPAFIASQAgZw2Q6GtjjLQAIAAoAHAAcgBvAGQAdQBjAHQAaQBvAG4AIAAmACAAaQBkAGUAbwBnAHIAYQBwAGgAIABlAGwAZQBtAGUAbgB0AHMAKQBoAHQAdABwADoALwAvAHcAdwB3AC4AYQBkAG8AYgBlAC4AYwBvAG0ALwB0AHkAcABlAC8AVABoAGkAcwAgAEYAbwBuAHQAIABTAG8AZgB0AHcAYQByAGUAIABpAHMAIABsAGkAYwBlAG4AcwBlAGQAIAB1AG4AZABlAHIAIAB0AGgAZQAgAFMASQBMACAATwBwAGUAbgAgAEYAbwBuAHQAIABMAGkAYwBlAG4AcwBlACwAIABWAGUAcgBzAGkAbwBuACAAMQAuADEALgAgAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACAAZABpAHMAdAByAGkAYgB1AHQAZQBkACAAbwBuACAAYQBuACAAIgBBAFMAIABJAFMAIgAgAEIAQQBTAEkAUwAsACAAVwBJAFQASABPAFUAVAAgAFcAQQBSAFIAQQBOAFQASQBFAFMAIABPAFIAIABDAE8ATgBEAEkAVABJAE8ATgBTACAATwBGACAAQQBOAFkAIABLAEkATgBEACwAIABlAGkAdABoAGUAcgAgAGUAeABwAHIAZQBzAHMAIABvAHIAIABpAG0AcABsAGkAZQBkAC4AIABTAGUAZQAgAHQAaABlACAAUwBJAEwAIABPAHAAZQBuACAARgBvAG4AdAAgAEwAaQBjAGUAbgBzAGUAIABmAG8AcgAgAHQAaABlACAAcwBwAGUAYwBpAGYAaQBjACAAbABhAG4AZwB1AGEAZwBlACwAIABwAGUAcgBtAGkAcwBzAGkAbwBuAHMAIABhAG4AZAAgAGwAaQBtAGkAdABhAHQAaQBvAG4AcwAgAGcAbwB2AGUAcgBuAGkAbgBnACAAeQBvAHUAcgAgAHUAcwBlACAAbwBmACAAdABoAGkAcwAgAEYAbwBuAHQAIABTAG8AZgB0AHcAYQByAGUALgBoAHQAdABwADoALwAvAHMAYwByAGkAcAB0AHMALgBzAGkAbAAuAG8AcgBnAC8ATwBGAEwAAAADAAAAAAAA/4MAMgAAAAAAAAAAAAAAAAAAAAAAAAAX) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
      font-style: normal;
      font-weight: normal;
    }
    .font-vertical {
      display: inline-flex;
      flex-direction: row-reverse;
      padding: 2em;
      border: 1px dotted gray;
      margin: 1em;
    }
    .font-demo {
      writing-mode: vertical-lr;
      line-height: 1em;
      /* background-color: #00f; */
    }
    .font-set {
      font-family: 'SYSTBD';
    }
    .font-check {
      position: absolute;
      opacity: 0;
      visibility: hidden;
    }
    .font-system {
    }
    .font-hack .font-hanlde {
      /* width: 1em; */
      writing-mode: initial;
    }
    .font-hack .font-hanlde span {
      display: block;
    }
  </style>
</head>
<body>
  <p class="font-check font-demo" id="fontCheck">检测文本竖排展示是否异常</p>
  <div class="font-vertical" id="fontCon">
    <p class="font-demo font-set">文字竖向展示Test ABC 设定字体</p>
    <p class="font-demo font-set">文字竖向展示Test ABC 设定字体</p>
    <p class="font-demo font-system">文字竖向展示Test ABC 系统字体</p>
    <p class="font-demo font-system jsHandle font-hanlde">文字竖向展示Test ABC 系统字体 <mark>处理后</mark></p>
  </div>
  <script>
    (function() {
      var txtHack = function (ele) {
        [].slice.call(ele.childNodes).forEach(function (node) {
          if (node.nodeType == 3) {
            var arrNodes = node.textContent.split('').map(function (char) {
              var span = document.createElement('span');
              span.textContent = char;
              return span;
            });
            node.replaceWith.apply(node, arrNodes);
          } else if (node.nodeType === 1) {
            txtHack(node);
          }
        })
      };

      // 检测元素
      var txtTest = document.getElementById('fontCheck');   
      var txtContent = txtTest.textContent;
      var lengthCh = txtContent.match(/\W/) && txtContent.match(/\W/).length;
      var minHeight = lengthCh / 2 * (parseFloat(getComputedStyle(txtTest).fontSize) || 16);

      // 最高层容器
      var fontCon = document.getElementById('fontCon');
      
      if(txtTest.clientHeight < minHeight) {
        fontCon.classList.add('font-hack');
        document.querySelectorAll('.jsHandle').forEach(function(ele) {
          // console.log(ele);
          txtHack(ele);
        }); 
      } else {
        if (fontCon.classList.contains('font-hack')) {
          fontCon.classList.remove('font-hack');
        }
        
      }
    })();

    

  
  
  </script>
</body>
</html>